import { BasicColumn, BasicTable, FormSchema, useTable } from "@/components/Table";
import { Button, message, Popconfirm, Tag } from "antd";
import { useDrawer } from "@/components/Drawer";
import { formatDate } from "@/utils/util";
import { processExpressionApi } from "@/api/bpm/task/processExpression";
import CreateAndUpdata from "./components/createAndUpdata";
import Toolbar from "@/components/ViewComponents/Toolbar";
import { useTranslation } from "react-i18next";

const index = () => {
	const { t } = useTranslation();
	const en_vi = "task.processExpression";
	const schemas: FormSchema[] = [
		{
			label: t(`${en_vi}.name`),
			field: "name",
			component: "Input"
		},
		{
			label: t(`${en_vi}.status`),
			field: "status",
			component: "Select",
			componentProps: {
				options: [
					{
						label: t(`${en_vi}.open`),
						value: 0
					},
					{
						label: t(`${en_vi}.closed`),
						value: 1
					}
				]
			}
		},
		{
			label: t(`${en_vi}.createTime`),
			field: "createTime",
			component: "RangePicker"
		}
	];
	const columns: BasicColumn[] = [
		{
			title: t(`${en_vi}.id`),
			dataIndex: "id"
		},
		{
			title: t(`${en_vi}.name`),
			dataIndex: "name"
		},
		{
			title: t(`${en_vi}.status`),
			dataIndex: "status",
			render: (status: any) => {
				return status === 0 ? (
					<Tag color="processing">{t(`${en_vi}.open`)}</Tag>
				) : (
					<Tag color="default">{t(`${en_vi}.closed`)}</Tag>
				);
			}
		},
		{
			title: t(`${en_vi}.expression`),
			dataIndex: "expression"
		},
		{
			title: t(`${en_vi}.createTime`),
			dataIndex: "createTime",
			render: (time: any) => {
				return formatDate(new Date(time));
			}
		},

		{
			title: t(`${en_vi}.operations`),
			fixed: "right",
			width: 200,
			render: (_, record) => {
				return (
					<div>
						<Button type="link" onClick={updata(record)}>
							{t(`${en_vi}.edit`)}
						</Button>
						<Popconfirm
							placement="bottomLeft"
							title={t(`${en_vi}.confirmToDelete`)}
							onConfirm={deleteFn(record)}
							okText="Yes"
							cancelText="No"
						>
							<Button type="link">{t(`${en_vi}.delete`)}</Button>
						</Popconfirm>
					</div>
				);
			}
		}
	];
	const [register, { reload }] = useTable({
		api: processExpressionApi.processExpressionPage,
		columns,
		useSearchForm: true,
		formConfig: {
			labelWidth: 150,
			schemas,
			showActionButtonGroup: true,
			baseColProps: { span: 7 },
			actionColOptions: { span: 24 }
		},
		bordered: true
	});
	const [registerDrawer, { openDrawer }] = useDrawer();
	const updata = (record: any) => () => {
		openDrawer(true, {
			record,
			reload
		});
	};
	const deleteFn = async (record: any) => {
		const res = await processExpressionApi.processExpressionDelete(record);
		if (!res) return message.error(t("kevin_ui.deleteFailed"));
		message.success(t("kevin_ui.daleteSucceessfully"));
		reload();
	};
	const handlerToolbarAction = (key: string) => {
		switch (key) {
			case "add":
				openDrawer(true, {
					reload
				});
				break;
		}
	};
	return (
		<div className="page">
			<div className="page-content">
				<BasicTable register={register}></BasicTable>
			</div>
			<CreateAndUpdata register={registerDrawer}></CreateAndUpdata>
			<Toolbar action={handlerToolbarAction} btnList={["add"]} />
		</div>
	);
};
export default index;
